<template>
  <div>
    <el-row :gutter="10">
      <el-form ref="clientForm" :model="clientFormData" :rules="rules" size="mini" label-width="100px"
        label-position="top">
        <el-col :span="12">
          <el-form-item label="表单ID" prop="id">
            <el-input v-model="clientFormData.id" placeholder="请输入客户ID" readonly :disabled='true'
              prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="填报日期" prop="createTime">
            <el-input v-model="clientFormData.createTime" placeholder="请输入客户姓名" :maxlength="10"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-user'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="clientFormData.name" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码" prop="certificateNumber">
            <el-input v-model="clientFormData.certificateNumber" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="籍贯" prop="hometown">
            <el-input v-model="clientFormData.hometown" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份类型" prop="userType">
            <el-input v-model="clientFormData.userType" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在校区" prop="campus">
            <el-input v-model="clientFormData.campus" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input v-model="clientFormData.phoneNumber" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="紧急联系人" prop="urgentMan">
            <el-input v-model="clientFormData.urgentMan" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="紧急联系人联系方式" prop="urgentContract">
            <el-input v-model="clientFormData.urgentContract" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="当前所在国家" prop="currentLocationCountry">
            <el-input v-model="clientFormData.currentLocationCountry" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="当前所在省份" prop="currentLocationProvince">
            <el-input v-model="clientFormData.urgentContract" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="当前所在市区" prop="currentLocationDistrict">
            <el-input v-model="clientFormData.currentLocationDistrict" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="健康状况" prop="healthSituation">
            <el-input v-model="clientFormData.healthSituation" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="2021年06月01日至6月15日是否到达或途径疫情防控重点地区（以置顶显示的重点地区为准）" prop="isReachKeyArea">
            <el-input v-model="clientFormData.isReachKeyArea" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="2021年06月01日至6月15日您是否有接触过疑似病例/确诊病例？" prop="isTouchDangerPerson">
            <el-input v-model="clientFormData.isTouchDangerPerson" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="clientFormData.remark" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="今日体温" prop="bodyTemperature">
            <el-input v-model="clientFormData.bodyTemperature" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最近出行的时间地点" prop="lastestTravel">
            <el-input v-model="clientFormData.lastestTravel" placeholder="请输入联系方式" :maxlength="11"
              show-word-limit readonly :disabled='true' clearable prefix-icon='el-icon-mobile-phone'
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: ['clientForm'],
  data() {
    return {
      clientFormData: {
        clientId: undefined,
        clientName: undefined,
        clientSex: 0,
        clientPhone: undefined,
        clientAddress: undefined,
      },
      rules: {
        clientId: [{
          required: true,
          message: '请输入客户ID',
          trigger: 'blur'
        }],
        clientName: [{
          required: true,
          message: '请输入客户姓名',
          trigger: 'blur'
        }],
        clientSex: [{
          required: true,
          message: '请选择客户性别',
          trigger: 'change'
        }],
        clientPhone: [{
          required: true,
          message: '请输入联系方式',
          trigger: 'blur'
        }],
        clientAddress: [{
          required: true,
          message: '请输入地址',
          trigger: 'blur'
        }],
      },
      clientSexOptions: [{
        "label": "男",
        "value": 0
      }, {
        "label": "女",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {
    clientForm: function(n, o){
      this.clientFormData = n
    }
  },
  created() {
    this.clientFormData = this.clientForm
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['clientForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['clientForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
